<template>
  <div class="clientType">
    <div class="title-container">
      <div class="left-box">
        <el-form ref="form" :model="searchForm" :inline="true" class="formClass">
          <el-form-item>
            <el-input
              prefix-icon="el-icon-search"
              type="input"
              placeholder="请输入客户名称"
              v-model="searchForm.customerName"
              @clear="clearSearch"
              clearable
              style="margin-right: 10px;"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <global-card>
      <template #leftTitle>
        <el-button type="success" icon="el-icon-refresh" @click="refresh">刷新</el-button>
      </template>
      <template #content>
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          style="width: 100%"
          class="elTable"
        >
          <el-table-column type="index" label="序号" width="80" align="center"/>
          <el-table-column prop="customerCode" label="客户编码" align="center"/>
          <el-table-column prop="customerName" label="客户名称" align="center"/>
          <el-table-column prop="customerPhone" label="手机号" align="center"/>
          <el-table-column prop="reserveCode" label="预约单号" align="center"/>
<!--          <el-table-column prop="" label="是否付款订单" align="center">-->
<!--            <template slot-scope="scope">-->
<!--              <el-tag :type="scope.row.companyType == 1 ? 'success' : 'danger'">{{ scope.row.companyType == 1 ? "是" :-->
<!--                "否"}}-->
<!--              </el-tag>-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column prop="orderCode" label="订单号" align="center"/>
          <el-table-column prop="" label="预约状态" align="center">
            <template slot-scope="scope">
              {{ scope.row.reserveStatus == 0 ? "进行中" : "已预约"}}
            </template>
          </el-table-column>
          <el-table-column prop="" label="管家是否回复 " align="center">
            <template slot-scope="scope">
              <el-tag :type="scope.row.isReply == 1 ? 'success' : 'danger'">{{ scope.row.isReply == 1 ? "是" : "否"}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="replyDesc" label="管家回复" align="center"/>
          <el-table-column prop="createTime" label="用户操作时间" align="center"/>
          <el-table-column prop="replyDate" label="回复时间" align="center"/>
          <el-table-column prop="reserveDate" label="预约时间" align="center"/>
<!--          <el-table-column prop="resrveProductType" label="预约商品类型" align="center">-->
<!--            <template slot-scope="scope">-->
<!--              {{ resrveProductTypeData[scope.row.resrveProductType].name }}-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column prop="reserveProductName" label="预约商品名称" align="center"/>
        </el-table>
      </template>
      <template #footer>
        <pagination
          class="pagination"
          :total="count"
          :page.sync="pageIndex"
          :limit.sync="pageSize"
          @pagination="pagination"
        />
      </template>
    </global-card>

    <global-message
      v-if="isGlobalMessageShow"
      :message="message"
      @receive="receive"
    />
  </div>
</template>

<script>
  import ycDialog from "@/components/pageDialog"
  import perButton from "@/components/permissionButton"
  import {
    queryPage
  } from "@/api/makeAnAppointmentManagement/makeAnAppointment"

  export default {
    components: {
      ycDialog,
      perButton
    },
    data() {
      return {
        tableData: [],
        pageIndex: 1,
        pageSize: 10,
        count: 0,
        orderStatusData: [
          { id: 0, name: "进行中" },
          { id: 1, name: "已完成" },
          { id: 2, name: "改价审核" },
          { id: 3, name: "改价审核通过" }
        ],
        resrveProductTypeData: [
          { id: 0, name: "豪车" },
          { id: 1, name: "家政" },
          { id: 2, name: "奢侈品" },
          { id: 3, name: "私餐" },
          { id: 4, name: "高端游" },
          { id: 5, name: "车辆租赁" },
          { id: 6, name: "其他商品" }
        ],
        searchForm: {
          customerName: ""
        },
        isGlobalMessageShow: false,
        message: "",
        loading: false,
        detailsDisabled: false,
        addOrUpdateLoading: false
      }
    },
    created() {
      this.getData()
    },
    methods: {
      async searchClick() {
        this.getData()
      },
      clearSearch() {
        this.getData()
      },
      async getData() {
        const { customerName } = this.searchForm
        this.loading = true
        const data = await queryPage({
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          orderType: 0,
          customerName
        })
        this.tableData = data.object.data
        this.count = data.object.count
        this.loading = false
      },
      pagination(pageItem) {
        this.getData(pageItem.page, pageItem.limit)
      },

      receive() {
        this.isGlobalMessageShow = false
      },

      refresh() {
        this.searchForm = {
          agreementName: "",
          agreementType: ""
        }
        this.getData()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .clientType {
    .title-container {
      display: flex;
      justify-content: flex-end;
      margin-right: 20px;

      .left-box {
        display: flex;

        .formClass {
          /*display: flex;*/
          /*margin-right: 20px;*/

          .el-form-item {
            margin-top: 20px;
            margin-bottom: 0;

            .el-input {
              width: 216px;
            }

            .el-select {
              width: 171px;
              margin-left: 10px;
            }

            .el-date-editor {
              width: 336px;
              margin-left: 10px;
            }
          }
        }

        /*.el-button {*/
        /*  // width: 42px;*/
        /*  height: 36px;*/
        /*  margin-top: 20px;*/
        /*}*/
      }
    }
  }
</style>
